<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/jianyin.webp" alt="">
    <span class="title">我的博客系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="blog_list.html">主页</a>
    <a href="blog_add.html">写博客</a>
    <a href="login.html">登陆</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img src="img/jianyin1.webp" class="avtar" alt="">
            <h3 id="username"></h3>
            <a href="http:www.github.com">github 地址</a>
            <div class="counter">
                <span>文章</span>
                <span id="">分类</span>
            </div>
            <div class="counter">
                <span id="artCount"></span>
                <span>1</span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
        <div class="blog-content">
            <!-- 博客标题 -->
            <h3 id="title"></h3>
            <!-- 博客时间 -->
            <div class="date">发布时间：<span id="updatetime"></span> &nbsp;&nbsp;
                阅读量：<span id="rcount"></span></div>
            <!-- 博客正文 -->
            <div id="editorDiv">

            </div>
            <!-- 评论 -->

            <div id="comment" style="margin-top: 20px">
                <input type="text" id="inComment" placeholder="发布你的评论"
                       style="width: 600px;height: 50px;border-radius: 10px;text-indent: 10px">

                <button onclick="upComment()" style="width: 100px;height: 50px;border-radius: 10px;">评论</button>
            </div>
            <div id="showcomment" style="margin-top: 20px">
                <div id="commentlist">

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var editormd;

    function initEdit(md) {
        editormd = editormd.markdownToHTML("editorDiv", {
            markdown: md, // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    }

    function upComment() {
        var commentC = jQuery("#inComment");
        var artid = getUrlValue("id");
        if (commentC.val() == "") {
            alert("请输入评论！");
            return;
        }
        jQuery.ajax({
            url: "/art/upcomment",
            type: "POST",
            data: {"comment": commentC.val(), "artid": artid},
            success: function (result) {
                if (result != null && result.code == 200 && result.data == 1) {
                    alert("评论成功！");
                    location.href = location.href;
                } else {
                    alert("评论失败！");
                    location.href = location.href;

                }
            }
        })


    }

    function getUrlValue(key) {
        var params = location.search;
        if (params.length > 1) {
            params = location.search.substring(1);
            var paramArr = params.split("&");
            for (var i = 0; i < paramArr.length; i++) {
                var kv = paramArr[i].split("=");
                if (kv[0] = key) {
                    return kv[1];
                }
            }

        }
        return "";
    }

    function getArtDetail(id) {
        if (id == "") {
            alert("非法参数");
            return;
        }
        jQuery.ajax({
            url: "/art/detail",
            type: "POST",
            data: {"id": id},
            success: function (result) {
                if (result != null && result.code == 200) {
                    jQuery("#title").html(result.data.title);
                    jQuery("#updatetime").html(result.data.updatetime);
                    jQuery("#rcount").html(result.data.rcount);
                    initEdit(result.data.content);
                    showUser(result.data.uid);
                } else {
                    alert("查询失败！");
                }
            }
        });

    }

    getArtDetail(getUrlValue("id"));

    function showUser(uid) {
        jQuery.ajax({
            url: "/user/getuserbyid",
            type: "POST",
            data: {"id": uid},
            success: function (result) {
                if (result != null && result.code == 200 && result.data.id > 0) {
                    jQuery("#username").text(result.data.username);
                    jQuery("#artCount").text(result.data.artCount);
                } else {
                    alert("请求失败！")
                }
            }
        });
    }

    function updateRCount() {
        var id = getUrlValue("id");
        if (id != "") {
            jQuery.ajax({
                url: "art/uprcount",
                type: "POST",
                data: {"id": id},
                success: function (result) {

                }
            });
        }
    }

    updateRCount();

    function getCommentList() {
        var artid = getUrlValue("id");
        jQuery.ajax({
            url: "/art/comment",
            type: "POST",
            data: {"artid": artid},
            success: function (result) {
                if (result != null && result.code == 200) {
                    if (result.data != null && result.data.length > 0) {
                        var commentListDiv = "";
                        for (var i = 0; i < result.data.length; i++) {
                            var comItem = result.data[i];
                            commentListDiv += '<span >' + comItem.commentername + '：' + '</span>';
                            commentListDiv += '<span >' + comItem.comment + '</span>';
                            commentListDiv += '<div>' + comItem.commenttime + '</div>';
                        }
                        jQuery("#commentlist").html(commentListDiv)
                    } else {
                        jQuery("#commentlist").html("<h3>暂无评论</h3>");
                    }
                } else {
                    alert("评论显示失败！")
                }
            }
        })
    }

    getCommentList();
</script>
</body>

</html>